<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>Flexbox | Learning Bootstrap 4</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/theme.css">
  </head>
  <body>

    
<!--<nav class="navbar navbar-light bg-faded">
  <a class="navbar-brand" href="#">Learning Bootstrap 4</a>
  <ul class="nav navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="index.html">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="about.html">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="contact.html">Contact</a>
    </li>
  </ul>
  <form class="form-inline pull-xs-right">
    <input class="form-control" type="text" placeholder="Search">
    <button class="btn btn-primary" type="submit">Search</button>
  </form>
</nav>//-->
<nav class="navbar navbar-light bg-faded">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
  </ul>
  <form class="form-inline pull-xs-right">
    <input class="form-control" type="text" placeholder="Search">
    <button class="btn btn-success-outline" type="submit">Search</button>
  </form>
</nav>

    <!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <style type="text/css">
      .col-md-4 {
        background: grey;
        padding: 50px;
        margin-bottom: 20px;
      }
      </style>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget ornare lacus. Nulla sed vulputate mauris. Nunc nec urna vel sapien mattis consectetur sit amet eu tellus. Suspendisse tempus, justo sed posuere maximus, velit purus dictum lacus, nec vulputate arcu neque et elit. Aliquam viverra vitae est eu suscipit. Donec nec neque eu sapien blandit pretium et quis est. Sed malesuada sit amet mi eget pulvinar. Mauris posuere ac elit in dapibus. Duis ut nunc at diam volutpat ultrices non sit amet nulla. Aenean non diam tellus. Etiam non libero auctor, mattis dui ut, dignissim nunc. Nunc at dui pellentesque, tristique quam et, laoreet est.</div>
        <div class="col-md-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget ornare lacus. Nulla sed vulputate mauris. Nunc nec urna vel sapien mattis consectetur sit amet eu tellus. Suspendisse tempus, justo sed posuere maximus, velit purus dictum lacus, nec vulputate arcu neque et elit. Aliquam viverra vitae est eu suscipit. Donec nec neque eu sapien blandit pretium et quis est. Sed malesuada sit amet mi eget pulvinar. Mauris posuere ac elit in dapibus. Duis ut nunc at diam volutpat ultrices non sit amet nulla. Aenean non diam tellus. Etiam non libero auctor, mattis dui ut, dignissim nunc. Nunc at dui pellentesque, tristique quam et, laoreet est.

Phasellus iaculis massa non odio efficitur tincidunt. Phasellus ut diam varius, aliquam nibh vel, iaculis augue. Vestibulum eleifend scelerisque lacus, sed molestie mauris rutrum sed. Donec maximus non est sed ullamcorper. Phasellus nec eros vestibulum, aliquam lorem sed, luctus lacus. Pellentesque facilisis purus sit amet erat condimentum semper in congue ante. Suspendisse sollicitudin feugiat risus, vel imperdiet lorem feugiat vel. Pellentesque faucibus nec justo ac pharetra. Duis dictum efficitur purus, sed vulputate sapien varius et.</div>
        <div class="col-md-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget ornare lacus. Nulla sed vulputate mauris. Nunc nec urna vel sapien mattis consectetur sit amet eu tellus. Suspendisse tempus, justo sed posuere maximus, velit purus dictum lacus, nec vulputate arcu neque et elit. Aliquam viverra vitae est eu suscipit. Donec nec neque eu sapien blandit pretium et quis est. Sed malesuada sit amet mi eget pulvinar. Mauris posuere ac elit in dapibus. Duis ut nunc at diam volutpat ultrices non sit amet nulla. Aenean non diam tellus. Etiam non libero auctor, mattis dui ut, dignissim nunc. Nunc at dui pellentesque, tristique quam et, laoreet est.

Phasellus iaculis massa non odio efficitur tincidunt. Phasellus ut diam varius, aliquam nibh vel, iaculis augue. Vestibulum eleifend scelerisque lacus, sed molestie mauris rutrum sed. Donec maximus non est sed ullamcorper. Phasellus nec eros vestibulum, aliquam lorem sed, luctus lacus. Pellentesque facilisis purus sit amet erat condimentum semper in congue ante. Suspendisse sollicitudin feugiat risus, vel imperdiet lorem feugiat vel. Pellentesque faucibus nec justo ac pharetra. Duis dictum efficitur purus, sed vulputate sapien varius et.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget ornare lacus. Nulla sed vulputate mauris. Nunc nec urna vel sapien mattis consectetur sit amet eu tellus. Suspendisse tempus, justo sed posuere maximus, velit purus dictum lacus, nec vulputate arcu neque et elit. Aliquam viverra vitae est eu suscipit. Donec nec neque eu sapien blandit pretium et quis est. Sed malesuada sit amet mi eget pulvinar. Mauris posuere ac elit in dapibus. Duis ut nunc at diam volutpat ultrices non sit amet nulla. Aenean non diam tellus. Etiam non libero auctor, mattis dui ut, dignissim nunc. Nunc at dui pellentesque, tristique quam et, laoreet est.

Phasellus iaculis massa non odio efficitur tincidunt. Phasellus ut diam varius, aliquam nibh vel, iaculis augue. Vestibulum eleifend scelerisque lacus, sed molestie mauris rutrum sed. Donec maximus non est sed ullamcorper. Phasellus nec eros vestibulum, aliquam lorem sed, luctus lacus. Pellentesque facilisis purus sit amet erat condimentum semper in congue ante. Suspendisse sollicitudin feugiat risus, vel imperdiet lorem feugiat vel. Pellentesque faucibus nec justo ac pharetra. Duis dictum efficitur purus, sed vulputate sapien varius et.</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
      </div>
    </div>

    <!-- no container //-->
    <div class="row">
        <div class="col-md-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget ornare lacus. Nulla sed vulputate mauris. Nunc nec urna vel sapien mattis consectetur sit amet eu tellus. Suspendisse tempus, justo sed posuere maximus, velit purus dictum lacus, nec vulputate arcu neque et elit. Aliquam viverra vitae est eu suscipit. Donec nec neque eu sapien blandit pretium et quis est. Sed malesuada sit amet mi eget pulvinar. Mauris posuere ac elit in dapibus. Duis ut nunc at diam volutpat ultrices non sit amet nulla. Aenean non diam tellus. Etiam non libero auctor, mattis dui ut, dignissim nunc. Nunc at dui pellentesque, tristique quam et, laoreet est.</div>
        <div class="col-md-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget ornare lacus. Nulla sed vulputate mauris. Nunc nec urna vel sapien mattis consectetur sit amet eu tellus. Suspendisse tempus, justo sed posuere maximus, velit purus dictum lacus, nec vulputate arcu neque et elit. Aliquam viverra vitae est eu suscipit. Donec nec neque eu sapien blandit pretium et quis est. Sed malesuada sit amet mi eget pulvinar. Mauris posuere ac elit in dapibus. Duis ut nunc at diam volutpat ultrices non sit amet nulla. Aenean non diam tellus. Etiam non libero auctor, mattis dui ut, dignissim nunc. Nunc at dui pellentesque, tristique quam et, laoreet est.

Phasellus iaculis massa non odio efficitur tincidunt. Phasellus ut diam varius, aliquam nibh vel, iaculis augue. Vestibulum eleifend scelerisque lacus, sed molestie mauris rutrum sed. Donec maximus non est sed ullamcorper. Phasellus nec eros vestibulum, aliquam lorem sed, luctus lacus. Pellentesque facilisis purus sit amet erat condimentum semper in congue ante. Suspendisse sollicitudin feugiat risus, vel imperdiet lorem feugiat vel. Pellentesque faucibus nec justo ac pharetra. Duis dictum efficitur purus, sed vulputate sapien varius et.</div>
        <div class="col-md-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget ornare lacus. Nulla sed vulputate mauris. Nunc nec urna vel sapien mattis consectetur sit amet eu tellus. Suspendisse tempus, justo sed posuere maximus, velit purus dictum lacus, nec vulputate arcu neque et elit. Aliquam viverra vitae est eu suscipit. Donec nec neque eu sapien blandit pretium et quis est. Sed malesuada sit amet mi eget pulvinar. Mauris posuere ac elit in dapibus. Duis ut nunc at diam volutpat ultrices non sit amet nulla. Aenean non diam tellus. Etiam non libero auctor, mattis dui ut, dignissim nunc. Nunc at dui pellentesque, tristique quam et, laoreet est.

Phasellus iaculis massa non odio efficitur tincidunt. Phasellus ut diam varius, aliquam nibh vel, iaculis augue. Vestibulum eleifend scelerisque lacus, sed molestie mauris rutrum sed. Donec maximus non est sed ullamcorper. Phasellus nec eros vestibulum, aliquam lorem sed, luctus lacus. Pellentesque facilisis purus sit amet erat condimentum semper in congue ante. Suspendisse sollicitudin feugiat risus, vel imperdiet lorem feugiat vel. Pellentesque faucibus nec justo ac pharetra. Duis dictum efficitur purus, sed vulputate sapien varius et.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget ornare lacus. Nulla sed vulputate mauris. Nunc nec urna vel sapien mattis consectetur sit amet eu tellus. Suspendisse tempus, justo sed posuere maximus, velit purus dictum lacus, nec vulputate arcu neque et elit. Aliquam viverra vitae est eu suscipit. Donec nec neque eu sapien blandit pretium et quis est. Sed malesuada sit amet mi eget pulvinar. Mauris posuere ac elit in dapibus. Duis ut nunc at diam volutpat ultrices non sit amet nulla. Aenean non diam tellus. Etiam non libero auctor, mattis dui ut, dignissim nunc. Nunc at dui pellentesque, tristique quam et, laoreet est.

Phasellus iaculis massa non odio efficitur tincidunt. Phasellus ut diam varius, aliquam nibh vel, iaculis augue. Vestibulum eleifend scelerisque lacus, sed molestie mauris rutrum sed. Donec maximus non est sed ullamcorper. Phasellus nec eros vestibulum, aliquam lorem sed, luctus lacus. Pellentesque facilisis purus sit amet erat condimentum semper in congue ante. Suspendisse sollicitudin feugiat risus, vel imperdiet lorem feugiat vel. Pellentesque faucibus nec justo ac pharetra. Duis dictum efficitur purus, sed vulputate sapien varius et.</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
      </div>

    <!-- jQuery first, then Bootstrap JS. -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

    <!-- footer //-->
<div class="container">
	<div class="row">
		<div class="col-lg-12">
			Learning Bootstrap 4 2016
		</div>
	</div>
</div>

    <!-- jQuery first, then Bootstrap JS. -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>